<template>
	<div id="details">
		<!-- 头部 -->
		<div class="page-header">
			<div class="title">
				<p>One Piece</p>
				<div class="list">
					<ul>
						<li>
							<router-link to>概述</router-link>
						</li>
						<li>
							<router-link to>参数</router-link>
						</li>
						<li>
							<router-link to>用户评价</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 头部END -->

		<!-- 主要内容 -->
		<div class="main">
			<!-- 左侧商品轮播图 -->
			<div class="block">
				<el-carousel height="560px" v-if="2>1">
					<el-carousel-item v-for="(item,index) in dataList.imageList " :key="index">
						<img style="height:560px;" :src="item.url" alt />
					</el-carousel-item>
				</el-carousel>
				<div v-if="0==1">
					<img style="height:560px;" :src="item.url" alt />
				</div>
			</div>
			<!-- 左侧商品轮播图END -->
			<!-- 右侧内容区 -->
			<div class="content">
				<h1 class="name">小米</h1>
				<p class="intro">为发烧而生</p>
				<p class="store">小米自营</p>
				<div class="price">
					<span>9999999999元</span>
					<span v-show="1==1" class="del">8888888元</span>
				</div>
				<div class="pro-list">
					<span class="pro-name">小米</span>
					<span class="pro-price">
						<span>88888888元</span>
						<span v-show="1==1" class="pro-del">777777777元</span>
					</span>
					<p class="price-sum">总计 : 666666666666666元</p>
				</div>
				<!-- 内容区底部按钮 -->
				<div class="button">
					<el-button class="shop-cart">加入购物车</el-button>
					<el-button class="like">喜欢</el-button>
				</div>
				<!-- 内容区底部按钮END -->
				<div class="pro-policy">
					<ul>
						<li>
							<i class="el-icon-circle-check"></i> 小米自营
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 小米发货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天无理由退货，那么少
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天价格保护，哈哈哈
						</li>
					</ul>
				</div>
			</div>
			<!-- 右侧内容区END -->
		</div>
	</div>
</template>

<script>
	export default {
		name: "GoodDetail",
		components: {},
		data() {
			return {
				dataList: {
					imageList: [{
							url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
						},
						{
							url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105416.png"
						},
						{
							url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
						}
					]
				},
			}
		},
		methods: {
			goBack() {
				this.$router.push({
					path: 'home'
				})
			}
		}
	}
</script>

<style>
	/* 头部CSS */
	#details .page-header {
		height: 64px;
		margin-top: -20px;
		z-index: 4;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
		box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
	}

	#details .page-header .title {
		width: 1225px;
		height: 64px;
		line-height: 64px;
		font-size: 18px;
		font-weight: 400;
		color: #212121;
		margin: 0 auto;
	}

	#details .page-header .title p {
		float: left;
	}

	#details .page-header .title .list {
		height: 64px;
		float: right;
	}

	#details .page-header .title .list li {
		float: left;
		margin-left: 20px;
	}

	#details .page-header .title .list li a {
		font-size: 14px;
		color: #616161;
	}

	#details .page-header .title .list li a:hover {
		font-size: 14px;
		color: #ff6700;
	}

	/* 头部CSS END */

	/* 主要内容CSS */
	#details .main {
		width: 1225px;
		height: 560px;
		padding-top: 30px;
		margin: 0 auto;
	}

	#details .main .block {
		float: left;
		width: 560px;
		height: 560px;
	}

	#details .el-carousel .el-carousel__indicator .el-carousel__button {
		background-color: rgba(163, 163, 163, 0.8);
	}

	#details .main .content {
		float: left;
		margin-left: 25px;
		width: 640px;
	}

	#details .main .content .name {
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		font-weight: normal;
		color: #212121;
	}

	#details .main .content .intro {
		color: #b0b0b0;
		padding-top: 10px;
	}

	#details .main .content .store {
		color: #ff6700;
		padding-top: 10px;
	}

	#details .main .content .price {
		display: block;
		font-size: 18px;
		color: #ff6700;
		border-bottom: 1px solid #e0e0e0;
		padding: 25px 0 25px;
	}

	#details .main .content .price .del {
		font-size: 14px;
		margin-left: 10px;
		color: #b0b0b0;
		text-decoration: line-through;
	}

	#details .main .content .pro-list {
		background: #f9f9fa;
		padding: 30px 60px;
		margin: 50px 0 50px;
	}

	#details .main .content .pro-list span {
		line-height: 30px;
		color: #616161;
	}

	#details .main .content .pro-list .pro-price {
		float: right;
	}

	#details .main .content .pro-list .pro-price .pro-del {
		margin-left: 10px;
		text-decoration: line-through;
	}

	#details .main .content .pro-list .price-sum {
		color: #ff6700;
		font-size: 24px;
		padding-top: 20px;
	}

	#details .main .content .button {
		height: 55px;
		margin: 10px 0 20px 0;
	}

	#details .main .content .button .el-button {
		float: left;
		height: 55px;
		font-size: 16px;
		color: #fff;
		border: none;
		text-align: center;
	}

	#details .main .content .button .shop-cart {
		width: 340px;
		background-color: #ff6700;
	}

	#details .main .content .button .shop-cart:hover {
		background-color: #f25807;
	}

	#details .main .content .button .like {
		width: 260px;
		margin-left: 40px;
		background-color: #b0b0b0;
	}

	#details .main .content .button .like:hover {
		background-color: #757575;
	}

	#details .main .content .pro-policy li {
		float: left;
		margin-right: 20px;
		color: #b0b0b0;
	}

	/* 主要内容CSS END */
</style>
